<template>
  <div id="index">
    <el-container style="height: 500px; border: 1px solid #eee"
      ><el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <!-- :default-active="$route.path" 菜单高亮 index的值-->
        <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        router>
          <el-menu-item index="/index/table">
            <i class="el-icon-setting"></i>
            <span slot="title">表格</span>
          </el-menu-item>
          <el-menu-item index="/index/tree">
            <i class="el-icon-setting"></i>
            <span slot="title">树</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px"> </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }
    return {
      tableData: Array(20).fill(item)
    }
  }
}
</script>
<style>
html,
body {
  height: 100% !important;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
